<template>
	<view>
		<view class="top1">
			<view :class="{item1:true,active:activeIndex==='1'}" @click="navageto('1')">
				首页
			</view>
			<view :class="{item1:true,active:activeIndex==='2'}" @click="navageto('2')">
				操作页
			</view>
			<view :class="{item1:true,active:activeIndex==='3'}" @click="navageto('3')">
				消息页
			</view>
			<view :class="{item1:true,active:activeIndex==='4'}" @click="navageto('4')">
				课程页
			</view>
			<!-- <view @click="open" class="ire">
		<i class="el-icon-refresh-right"></i>
	</view>	 -->
		</view>
		<view class="main">
			<view class="tou12">
				<view class="t_12">
					<!-- <view class="item_head">
						HTML
					</view> -->
					<view style="height: 100%;">
						<view class="teitel2">
							大阶段：
							<el-select @change='chende' v-model="value" placeholder="请选择阶段">
								<el-option v-for="item in options" :key="item.label" :label="item.label"
									:value="item.label">
								</el-option>
							</el-select>
						</view>
					</view>
					<view style="height: 100%;">
						<view class="teitel2">
							阶段分类：
							<el-select @change='chende1' v-model="value1" placeholder="请选择阶段">
								<el-option v-for="item in options1" :key="item.videocate" :label="item.videocate"
									:value="item.videocate">
								</el-option>
							</el-select>

						</view>
					</view>
					<view class="" style="height: 100%;">
						<view class="teitel2">
							阶段课程：
							<!-- 课程 -->
							<el-select @change='chende2' v-model="value2" placeholder="请选择阶段">
								<el-option v-for="item in options2" :key="item.erjicate" :label="item.erjicate"
									:value="item.erjicate">
								</el-option>
							</el-select>
						</view>
					</view>

				</view>
			</view>
			<el-alert title="警告提示的文案" type="warning" :closable="false" show-icon>
			</el-alert>
			<!-- 上传作业区域 -->
			<view class="">
				<view class="titel1">
					上传作业区域
				</view>
				<view style="display: flex;">
					<view>
						<view v-if="!isupload" class="border_up" @click="upload2()">
							<image style="width: 60px;height: 60px;"
								src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0e81782d-dd8f-4ba7-90bb-b62e4fa43b58/682e274d-9722-48b7-9e83-15b002a34ce6.png"
								mode=""></image>
							<view class="te22">
								点击上传作业
							</view>
						</view>
						<view v-else class="border_up" style="background-color: #f3f3f3;">
							<el-progress v-if="procress<100" type="circle" :percentage="procress"></el-progress>
							<el-progress v-if="procress===100" type="circle" :percentage="100" status="success">
							</el-progress>
						</view>
					</view>
					<view class="iuhe1">
						<el-table :data="zuoyedata" v-loading="loading1" height="220" style="width: 100%;">
							<el-table-column prop="namefile" label="名称" align="center">
							</el-table-column>
							<el-table-column prop="date" label="上传时间" align="center">
							</el-table-column>
							<el-table-column label="评分" width="180" align="center">
								<template slot-scope="scope">
									<el-tag v-if="scope.row.pingfen==='0'" type="warning">待检查</el-tag>
									<el-tag v-else type="success">{{scope.row.pingfen}}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="180" align="center">
								<template slot-scope="scope">
									<el-button @click="xiazai(scope.row)" size="mini" type="primary">下载</el-button>
									<el-button @click="shanchu(scope.row._id)" size="mini" type="warning">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</view>
				</view>

			</view>
			<!-- 上传笔记 -->
			<view class="">
				<view class="titel1">
					上传笔记区域
				</view>
				<view style="display: flex;">
					<view>
						<view v-if="!isupload12" class="border_up" @click="upload212()">
							<image style="width: 60px;height: 60px;"
								src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0e81782d-dd8f-4ba7-90bb-b62e4fa43b58/ecc53218-fbb2-40d7-87d0-7d0dd635d696.png"
								mode=""></image>
							<view class="te22">
								点击上传笔记
							</view>
						</view>
						<view v-else class="border_up" style="background-color: #f3f3f3;">
							<el-progress v-if="procress12<100" type="circle" :percentage="procress12"></el-progress>
							<el-progress v-if="procress12===100" type="circle" :percentage="100" status="success">
							</el-progress>
						</view>
					</view>
					<view class="iuhe1">
						<el-table :data="bijidata" v-loading="loading1" height="220" style="width: 100%;">
							<el-table-column prop="namefile" label="名称" align="center">
							</el-table-column>
							<el-table-column prop="date" label="上传时间" align="center">
							</el-table-column>
							<el-table-column label="评分" width="180" align="center">
								<template slot-scope="scope">
									<el-tag v-if="scope.row.pingfen==='0'" type="warning">待检查</el-tag>
									<el-tag v-else type="success">{{scope.row.pingfen}}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="180" align="center">
								<template slot-scope="scope">
									<el-button @click="xiazai(scope.row)" size="mini" type="primary">下载</el-button>
									<el-button @click="shanchu(scope.row._id)" size="mini" type="warning">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</view>
				</view>
			</view>
			
		</view>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" >
			<span>登录信息已经过期，请重新登录！</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="queren">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				dialogVisible: false,
				activeIndex: '2',
				procress: 0,
				procress12: 0,
				isupload: false,
				isupload12: false,
				options: [{
					label: '第一阶段'
				}, {
					label: '第二阶段'
				}, {
					label: '第三阶段'
				}],
				sqltext: '',
				userdata: {},
				value: '第一阶段',
				options1: [],
				value1: '',
				options2: [],
				value2: '',
				tableData12: [{
					name: '',
					date: '',
				}],
				// 作业列表
				zuoyedata: [],
				// 笔记列表
				bijidata: [],
				loading1: false

			};
		},
		onShow() {
			if(uni.getStorageSync('uni_id_token')&&uni.getStorageSync('uni_id_token_expired')){
			}else{
				this.dialogVisible=true
			}
		},
		onLoad() {
			
			if (uni.getStorageSync('userpro')) {
				this.loading1 = true
				this.userid = uni.getStorageSync('uni_id')
				this.userdata = uni.getStorageSync('userpro')
				this.value = this.userdata.jieduan
				this.value1 = this.userdata.fenlei
				this.value2 = this.userdata.kecheng
				this.setsql(this.userdata.jieduan)
				this.getcate(this.sqltext)
				this.chende1(this.userdata.fenlei)
				this.getzuoye()
				this.getbiji()
			}
		},
		methods: {
			queren(){
				this.dialogVisible=false
				 uni.clearStorageSync();
				uni.reLaunch({
					url:'../../login/login'
				})
			},
			async chende2(val) {
				this.loading1 = true
				const db = uniCloud.database()
				let res = await db.collection(this.sqltext).where('erjicate=="' + val + '"').get()
				// let a=0
				// let b=0
				// for (let i = 0; i < res.result.data.length; i++) {
				// 	let arr=res.result.data[i].videodate.split(':')
				// 	a+=parseInt(arr[0])
				// 	b+=parseInt(arr[1])
				// }
				// let c=parseInt((b/60).toFixed(0))
				// let str=res.result.data.length
				// console.log(`(${str}集) ${a+c}m ${((a+c)/60).toFixed(2)}h`);
				this.getzuoye()
				this.getbiji()
			},
			chende(val) {
				if (val === "第一阶段") {
					this.sqltext = 'hc_kec_list'
					this.getcate(this.sqltext)
					this.value1 = ''
					this.value2 = ''
					this.options2 = []
				} else if (val === "第二阶段") {
					this.sqltext = 'js_kec_list'
					this.getcate(this.sqltext)
					this.value1 = ''
					this.value2 = ''
					this.options2 = []
				} else if (val === "第三阶段") {
					this.sqltext = 'ajno_kec_list'
					this.getcate(this.sqltext)
					this.value1 = ''
					this.value2 = ''
					this.options2 = []
				}
			},
			xiazai(data) {
				console.log(data);
				window.open(data.urldata)
			},
			async shanchu(id) {
				this.loading1 = true
				const db = uniCloud.database();
				let collection = db.collection('zuoyefile')
				let res = await collection.where({
					_id: id,
				}).remove()
				if (res.result.code === 0) {
					this.getzuoye()
					this.getbiji()
					this.$message.success('删除成功')
				} else {
					this.$message.error('删除失败')
				}
			},
			async getclass(val) {
				const db = uniCloud.database()
				let res = await db.collection(this.sqltext).where('videocate=="' + val + '"').groupBy('erjicate')
					.orderBy('erjicate').get()
				this.options2 = res.result.data
				
			},
			chende1(val) {
				this.disabled = true
				console.log(val);
				this.getclass(val)
			},
			async getcate(val) {
				const db = uniCloud.database()
				let res = await db.collection(val).groupBy('videocate').orderBy('videocate').get()
				this.options1 = res.result.data
				console.log(this.options1);
			},
			setsql(val) {
				if (val === "第一阶段") {
					this.sqltext = 'hc_kec_list'
				} else if (val === "第二阶段") {
					this.sqltext = 'js_kec_list'
				} else if (val === "第三阶段") {
					this.sqltext = 'ajno_kec_list'
				}
			},
			navageto(id) {
				if (id === '1') {
					uni.switchTab({
						url: '/pages/home/home'
					});
				} else if (id === '3') {
					uni.switchTab({
						url: '/pages/home/message/message'
					});
				} else if (id === '4') {
					uni.switchTab({
						url: '/pages/home/course/course'
					});
				}
			},
			// 作业
			upload2() {
				let that = this
				uni.chooseFile({
					count: 6, //默认100
					extension: ['.zip', '.doc', '.docx', '.pdf'],
					success: function(res) {
						if (res.tempFiles[0].size > 5242880) {
							that.$message.error('文件大小不能超过5M')
							return
						}
						that.isupload = true
						console.log(res);
						let filePath = res.tempFilePaths[0]
						let textname = res.tempFiles[0].name
						let text = +new Date() + res.tempFiles[0].name
						uniCloud.uploadFile({
							filePath: filePath,
							cloudPath: text,
							onUploadProgress: function(progressEvent) {
								var percentCompleted = Math.round(
									(progressEvent.loaded * 100) / progressEvent.total
								);
								that.procress = percentCompleted
							},
							complete: res => {
								that.loading1 = true
								that.isupload = false
								console.log(res);
								that.baocunurl(res.fileID, '0', textname)
							},

						});

					}
				});
			},
			// 笔记
			upload212() {
				let that = this
				uni.chooseFile({
					count: 6, //默认100
					extension: ['.pdf', '.zip'],
					success: function(res) {
						if (res.tempFiles[0].size > 5242880) {
							that.$message.error('文件大小不能超过5M')
							return
						}
						that.isupload12 = true
						console.log(res);
						let filePath = res.tempFilePaths[0]
						let textname = res.tempFiles[0].name
						let text = +new Date() + res.tempFiles[0].name
						uniCloud.uploadFile({
							filePath: filePath,
							cloudPath: text,
							onUploadProgress: function(progressEvent) {
								var percentCompleted = Math.round(
									(progressEvent.loaded * 100) / progressEvent.total
								);
								that.procress12 = percentCompleted
							},
							complete: res => {
								that.isupload12 = false
								that.loading1 = true
								console.log(res.fileID);
								that.baocunurl(res.fileID, '1', textname)
							}
						});

					}
				});
			},
			// 上传完后后保存url
			async baocunurl(fileID, id, text) {
				let newdate = +new Date()
				const db = uniCloud.database();
				let collection = db.collection('zuoyefile')
				let res = await collection.add({
					userid: this.userid,
					ercate: this.value2,
					urldata: fileID,
					date: newdate + '',
					isbiji: id,
					namefile: text,
					pingfen: '0',
					ifcursezuoye:'0'
				})
				console.log(res, '123');
				if (res.result.code === 0) {
					this.getzuoye()
					this.getbiji()
					this.$message.success('上传成功')
				} else {
					this.$message.error('上传失败')
				}
			},
			// 获取作业
			async getzuoye() {
				const db = uniCloud.database();
				let collection = db.collection('zuoyefile')
				let res = await collection.where({
					userid: this.userid,
					ercate: this.value2,
					isbiji: '0',
				}).get()
				if (res.result.code === 0) {
					this.zuoyedata = res.result.data
					this.loading1 = false
				} else {
					this.loading1 = false
					this.$message.error('请求失败')
				}
			},
			// 获取笔记
			async getbiji() {
				const db = uniCloud.database();
				let collection = db.collection('zuoyefile')
				let res = await collection.where({
					userid: this.userid,
					ercate: this.value2,
					isbiji: '1',
				}).get()
				if (res.result.code === 0) {
					this.bijidata = res.result.data
					this.loading1 = false
				} else {
					this.loading1 = false
					this.$message.error('请求失败')
				}
			},

		}
	}
</script>

<style lang="scss">
	.ire {
		color: #fff;
		font-size: 20px;
		align-self: center;
		position: absolute;
		right: 153px;
		cursor: pointer;
	}

	.border_up {
		width: 400px;
		height: 220px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 1px dashed #ccc;
		border-radius: 10px;
		cursor: pointer;
	}

	.te22 {
		color: #ccc;
	}

	.border_up:hover {
		border: 1px dashed #60a9ff;
	}

	.border_up:hover .te22 {
		color: #60a9ff;
	}

	.tou12 {
		display: flex;
		justify-content: space-between;
	}

	.t_12 {
		width: 100%;
		height: 60px;
		background-color: #fff;
		position: relative;
		margin: auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
	}

	.you12 {
		width: 60%;
		text-align: center;
	}

	.zuo21 {
		width: 30%;
	}

	.teitel2 {
		font-weight: bold;
		font-size: 20px;
	}

	.t_34 {
		width: 30%;
		height: 160px;
		line-height: 160px;
		background-color: #fff;
	}

	.top1 {
		width: 100%;
		height: 60px;
		background-color: #545c64;
		display: flex;
		padding-bottom: 3px;
		padding: 0px 100px;
	}

	.item1 {
		width: 70px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		color: #fff;
		margin-right: 20px;
		cursor: pointer;
	}

	.active {
		color: #ffd04b;
		border-bottom: 3px solid #ffd04b;
	}

	.main {
		padding: 20px 100px;
		width: 100%;
	}

	.titel1 {
		width: 100%;
		height: 44px;
		line-height: 44px;
		padding-left: 10px;
		border-left: 5px solid #60a9ff;
		font-weight: bold;
		margin: 20px 0px;
	}

	.iuhe1 {
		flex: 1;
		border: 1px solid #ccc;
		border-radius: 10px;
		margin-left: 10px;
		overflow: hidden;
	}
</style>
